<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <span>中科院力学所医药费管理系统</span>
      </div>
      <div>
        <span>欢迎使用，</span>
        <el-dropdown>
          <span class="el-dropdown-link" style="text-decoration: underline">
            {{this.$root.name}}<i class="el-icon-arrow-down el-icon--right" style="margin-right: 20px"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="min-width: 60px" @click.native="openUserInfoDialog">个人信息</el-dropdown-item>
            <el-dropdown-item style="min-width: 60px" @click.native="changePasswordDialog = true">修改密码</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="info" @click="logout">退出</el-button>
      </div>
      <!-- 显示个人信息的drawer -->
      <el-drawer
        title="用户信息"
        :visible.sync="userInfoDialog"
        custom-class="demo-drawer"
        ref="drawer"
        size="25%"
      >
        <div class="demo-drawer__content">
          <el-form :model="userForm">
            <el-form-item label="工号" :label-width="formLabelWidth">
              <el-input v-model="userForm.username" autocomplete="off" disabled style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="userForm.name" autocomplete="off" disabled style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
              <el-input v-model="userForm.department" autocomplete="off" disabled style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
              <el-input v-model="userForm.auth" autocomplete="off" disabled style="width: 200px"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
      <!-- 修改密码的对话框 -->
      <el-dialog title="修改密码" :visible.sync="changePasswordDialog" width="30%" @close="changePasswordDialogClosed">
        <!-- 内容主体区域 -->
        <el-form :model="passwordForm" :rules="rules" ref="passwordFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="旧密码" prop="oldpassword">
            <el-input type="password" class="form-input" v-model="passwordForm.oldpassword" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpassword">
            <el-input type="password" class="form-input" v-model="passwordForm.newpassword" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmpassword">
            <el-input type="password" class="form-input" v-model="passwordForm.confirmpassword" style="width: 200px"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="changePasswordDialog = false">取 消</el-button>
          <el-button type="primary" @click="changePassword">确 定</el-button>
        </span>
      </el-dialog>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu background-color="#373d41" text-color="#fff" active-text-color="#409EFF"
                 :unique-opened="true" :collapse="isCollapse" :collapse-transition="false"
                 :router="true" :default-active="this.$router.history.current.path">
          <!-- 一级菜单 -->
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <!-- 图标 -->
              <i :class="iconsObj[item.id]"></i>
              <!-- 文本 -->
              <span>{{item.authName}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index= "'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
              <template slot="title">
                <!-- 图标 -->
                <i :class="iconsObj[subItem.id]"></i>
                <!-- 文本 -->
                <span>{{subItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主题 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
  const qs=require('querystring')
export default {
  data: function () {
    var validatePassword = (rule, value, callback) => {
      if (value !== this.passwordForm.newpassword) {
        return callback(new Error('两次密码输入不一致!'))
      }
      callback()
    }
    return {
      // 左侧菜单数据
      menuList: [],
      // 菜单栏图标
      iconsObj: {
        1: 'el-icon-document',
        2: 'el-icon-folder-add',
        3: 'el-icon-edit',
        4: 'el-icon-folder-checked',
        5: 'el-icon-s-order',
        6: 'el-icon-edit',
        7: 'el-icon-s-data',
        8: 'el-icon-user-solid',
        9: 'el-icon-menu',
        10: 'el-icon-menu',
        11: 'el-icon-menu',
        12: 'el-icon-data-line',
        13: 'el-icon-menu',
        14: 'el-icon-s-management',
        15: 'el-icon-chat-round',
        16: 'el-icon-menu'
      },
      // 是否折叠侧边栏
      isCollapse: false,
      // 用户个人信息对话框
      userInfoDialog: false,
      // 修改用户密码对话框
      changePasswordDialog: false,
      // 用户个人信息表单
      userForm: {},
      // 修改密码表单
      passwordForm: {
        oldpassword: '',
        newpassword: '',
        confirmpassword: ''
      },
      //表单验证规则
      rules: {
        oldpassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'}
        ],
        newpassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 6, max: 20, message: '密码长度必须在6-20位', trigger: 'blur'},
        ],
        confirmpassword: [
          { required: true, message: '请再次确认新密码', trigger: 'blur'},
          { validator: validatePassword, trigger: 'blur' }
        ]
      },
      // 表单标签宽度
      formLabelWidth: '60px',
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {

    /**
     * 获取左侧菜单栏内容
     */
    async getMenuList () {
      const id = this.$root.roleId
      let res = await this.$http.get(`roles/${id}`)
      if (res.status !== 200) {
        if(res.status === 403) {
          return this.$message.error('您没有获取菜单列表的权限!')
        }
        return this.$message.error('获取菜单列表失败!')
      }
      //console.log(res.data)
      this.menuList = res.data.menus
      //console.log(this.menuList)
    },

    /**
     * 打开用户信息对话框
     */
    async openUserInfoDialog () {
      const username = this.$root.workNumber
      let res = await this.$http.get(`user/${username}`)
      if (res.status !== 200){
        if(res.status === 403) {
          return this.$message.error('您没有获取用户信息的权限!')
        }
        return this.$message.error('获取用户信息失败!')
      }
      this.userForm = res.data
      this.userInfoDialog = true
    },

    /**
     * 修改密码
     * @param formName:用户表单引用名
     */
    changePassword () {
      // console.log(this.userForm)
      this.$refs.passwordFormRef.validate(async (valid) => {
        if (valid) {
          const user_id = this.$root.userId
          let res = await this.$http.put('user/password',
            qs.stringify({
                user_id: user_id,
                oldpassword: this.passwordForm.oldpassword,
                newpassword: this.passwordForm.newpassword
              })
          )
          if(res.status!==200){
            return this.$message.error('网络开小差了，请稍后再试!')
          }
          if(res.data==='旧密码错误，请重试')
            return this.$message.error(res.data)
          else{
            this.changePasswordDialog=false
            return this.$message.success('修改密码成功!')
          }
        } else {
          this.$message.error('表单信息不合法!')
          return false
        }
      })
    },

    /**
     * 关闭修改密码对话框之后的重置
     */
    changePasswordDialogClosed(){
      this.$refs.passwordFormRef.resetFields();
    },

    /**
     *  用户退出
     */
    logout () {
      window.sessionStorage.clear()
      this.$router.push("/login")
    },
    /**
     * 点击按钮切换菜单栏展开与折叠
     */
    toggleCollapse () {
      this.isCollapse=!this.isCollapse
    },
  }
}
</script>
<style lang="less" scoped>
  .home-container {
    height: 100%;
  }
  .el-header {
    background-color: #373d41;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 18px;
  }
  .el-aside {
    background-color: #373d41;
    .el-menu {
      border-right: none;
    }
  }
  .el-main {
    background-color: #eaedf1;
  }
  .toggle-button {
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: white;
    font-size: 18px;
  }
</style>
